<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
  <div ref="root" style="height:100%;"></div>
</template>
<script>
import {Line} from '@antv/g2plot'
import { ref,onMounted } from 'vue'
export default {
  setup(){
    //获取dom元素
    const root = ref(null)
    let line = null
    let initChart = ()=>{
    line = new Line(root.value, {
    data:[
      { day: '1', value: 100 ,type:'注册量'},
      { day: '2', value: 120 ,type:'注册量' },
      { day: '3', value: 20  ,type:'注册量'},
      { day: '4', value: 25 ,type:'注册量' },
      { day: '5', value: 15  ,type:'注册量'},
      { day: '6', value: 140 ,type:'注册量' },
      { day: '7', value: 160  ,type:'注册量'},
      { day: '8', value: 180  ,type:'注册量'},
      { day: '9', value: 200  ,type:'注册量'},
      { day: '10', value: 30  ,type:'注册量'},
      { day: '11', value: 34  ,type:'注册量'},
      { day: '12', value: 220  ,type:'注册量'},
      { day: '13', value: 240  ,type:'注册量'},
      { day: '14', value: 270 ,type:'注册量' },
      { day: '15', value: 290  ,type:'注册量' },
      { day: '16', value: 300  ,type:'注册量'},
      { day: '17', value: 25 ,type:'注册量' },
      { day: '18', value: 27 ,type:'注册量' },
      { day: '19', value: 310 ,type:'注册量' },
      { day: '20', value: 330  ,type:'注册量'},
      { day: '21', value: 350  ,type:'注册量'},
      { day: '22', value: 360  ,type:'注册量'},
      { day: '23', value: 370  ,type:'注册量'},
      { day: '24', value: 30 ,type:'注册量' },
      { day: '25', value: 380  ,type:'注册量'},
      { day: '26', value: 400  ,type:'注册量'},
      { day: '27', value: 420  ,type:'注册量'},
      { day: '28', value: 440  ,type:'注册量'},
      { day: '29', value: 460 ,type:'注册量' },
      { day: '30', value: 405 ,type:'注册量' },
    ],
      color:'#ecc640',
      padding: 'auto',
      xField: 'day',
      yField: 'value',
      xAxis: {
        // type: 'timeCat',
        tickCount: 30,
      },
    //  yAxis:{
    //    value:{
    //      alias:'注册量',
    //    }
    //  }
    });

    line.render();
  };
  

  
    onMounted(initChart)
    return{
      root
    }
  }
}
</script>